<template>
	<view class="page must_know" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>
		<u-sticky offset-top="-2px">
			<view class="hander">
				<view class="search-input">
					<u-search placeholder="请输入餐饮美食名称" v-model="fineVal" animation='false' @blur='blur'
						@search='search'></u-search>
				</view>
				<view class="searchCondition">
					<span class="item" @click="listShow=true">
						<u-icon name="arrow-down-fill" size="19" :label="listVal" labelPos="left"
							labelSize="13px"></u-icon>
					</span>
					<span class="item" @click="sortShow=true">
						<u-icon name="arrow-down-fill" size="19" :label="sortVal" labelPos="left"
							labelSize="13px"></u-icon>
					</span>
					<span class="item" @click="areaShow=true">
						<u-icon name="arrow-down-fill" size="19" :label="areaVal" labelPos="left"
							labelSize="13px"></u-icon>
					</span>
				</view>
			</view>
		</u-sticky>
		<!-- 商家推荐 -->
		<u-picker :itemHeight="88" :immediateChange="true" :show="listShow" :columns="List" title="渔家乐"
			:defaultIndex="passengerDefault" @cancel="listShow=false" @confirm="listConfirm"></u-picker>
		<!-- 智能排序 -->
		<u-picker :itemHeight="88" :immediateChange="true" :show="sortShow" :columns="sort" title="智能排序"
			:defaultIndex="passengerDefault" @cancel="sortShow=false" @confirm="sortConfirm"></u-picker>
		<!-- 全部区域 -->
		<u-picker :itemHeight="88" :immediateChange="true" :show="areaShow" :columns="area" title="全部区域"
			:defaultIndex="passengerDefault" @cancel="areaShow=false" @confirm="areaConfirm"></u-picker>


		<view class="list">
			<u-cell class="spotList" @click="toHref(item)" v-for="(item, index) in indexList" :key="index">
				<u-avatar slot="icon" shape="square" size="200" :src="item.coverImage"
					customStyle="border-radius:10px"></u-avatar>
				<view class="right" slot="title">
					<view class="p1">{{item.name}}</view>
					<view class="p2">
						<u-rate :count="count" size='33rpx' v-model="item.score" allowHalf='true' activeColor='#ff8f23'
							readonly></u-rate>
						<view style="font-size: 26rpx ; color: #5A607C;">
							{{item.score}}分
						</view>
					</view>
					<view class="p4">
						<view class="money">￥</view>
						<view class="price">
							{{item.minPrice}}
						</view>
						<view style="font-size: 24rpx; color: #5A607C;">
							/人均
						</view>
					</view>
				</view>
			</u-cell>
		</view>
		<!-- <uni-load-more :status="status" color="#007aff" /> -->

		<nodata class="nodatadiv" v-if="indexList.length === 0"></nodata>


	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	// import uniLoadMore from '@/compoments/load-more/index.vue'

	export default {
		components: {
			nodata,
			// uniLoadMore
		},
		data() {
			return {
				title: '餐饮美食',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				fineVal: '', //餐饮搜索
				status: 'more', //加载状态
				categoryMain: [{
						name: "渔家乐",
						icon: "https://i.ringzle.com/file/20231125/d963086e6de64c4c9db651e7e83c4fc9.png",
						type: '5'
					},
					{
						name: "地方菜系",
						icon: "https://i.ringzle.com/file/20231125/fad7a799d6a942039c1aa8db5ea5b75d.png",
						type: '6'
					},
					{
						name: "海鲜自助",
						icon: "https://i.ringzle.com/file/20231125/a314703e463d43c7808714d1b29632ad.png",
						type: '7'
					},
					{
						name: "小吃快餐",
						icon: "https://i.ringzle.com/file/20231125/fae54d6d2b014e3ba242bec5c8606e5a.png",
						type: '8'
					},
					{
						name: "咖啡甜品",
						icon: "https://i.ringzle.com/file/20231125/264588da41114331a4d539cf48815aaf.png",
						type: '9'
					}
				],
				count: 5,
				num: 4,
				passengerDefault: [0],
				currentNum: null,
				sortVal: '智能排序',
				sortShow: false,
				sort: [
					['默认排序', '好评优先', '距离优先', '高价优先', '低价优先', '星级']
				],
				areaVal: '全部区域',
				areaShow: false,
				area: [
					['全部']
				],
				listShow: false,
				List: [
					['渔家乐', '地方菜系', '海鲜自助', '小吃快餐', '咖啡甜品']
				],
				listVal: '渔家乐',
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},

				pricesort: 0, //降序
				list: [
					'https://i.ringzle.com/file/20231125/2ad135357eec4276a8b5ac0e86112b91.png',
					'https://i.ringzle.com/file/20231125/2ad135357eec4276a8b5ac0e86112b91.png'
				],
				indexList: [],
				fromData: {
					limit: 5,
					page: 1,
					orderField: '', //（排序字段）
					name: '', //（搜索框名称）
					areaCode: '', //（区域编码）
					type: '', //（菜品类型）
				},
				AddressList: []
			}
		},
		onLoad(option) {

			if (option.typeList !== '') {
				console.log('++++++', JSON.parse(option.typeList));
				let obj = JSON.parse(option.typeList)
				this.fromData.type = obj.type
				this.listVal = obj.name
				this.getRooms()
				this.getselectScenicList()
			} else {
				// this.getRoomsList()
				this.getRooms()
				this.getselectScenicList()
			}
			// uni.startPullDownRefresh();

		},
		//下拉刷新
		// onPullDownRefresh() {},
		//上拉加载
		onReachBottom() {
			console.log(this.status, '-----');
			if (this.status != 'noMore') {
				this.status = 'loading'
				// uni.showNavigationBarLoading()
				this.getRoomsList()
			}
		},

		methods: {

			// 搜索
			search(e) {
				console.log(e);
				this.fromData.page = 1
				this.fromData.name = e
				this.getRooms()
				this.fineVal = ''
			},
			// 搜索
			blur(e) {
				console.log(e);

				this.fromData.page = 1
				this.fromData.name = e
				this.getRooms()
				this.fineVal = ''
			},

			// 选择菜品
			listConfirm(item) {
				if (item.value[0] == '渔家乐') {
					this.listVal = item.value[0]
					this.fromData.type = 5
				} else if (item.value[0] == '地方菜系') {
					this.listVal = item.value[0]
					this.fromData.type = 6
				} else if (item.value[0] == '海鲜自助') {
					this.listVal = item.value[0]
					this.fromData.type = 7
				} else if (item.value[0] == '小吃快餐') {
					this.listVal = item.value[0]
					this.fromData.type = 8
				} else if (item.value[0] == '咖啡甜品') {
					this.listVal = item.value[0]
					this.fromData.type = 9
				}
				this.fromData.page = 1
				this.getRooms()
				this.listShow = false;

			},
			// returnBack() {
			// 	uni.reLaunch({
			// 		url: '/pages/index/index'
			// 	})
			// },
			getRoomsList() {
				let that = this
				this.$api.get('/api/isFood/page', this.fromData)
					.then(res => {
						console.log(res);
						if (res.data.code === 0) {
							that.fromData.page++;
							let {
								list,
								total
							} = res.data.data;
							if (that.indexList.length + list.length > total || list.length == 0)
								return that.isOver = true;
							that.indexList = [...that.indexList, ...list];
							console.log('--------', that.indexList);
						} else that.$showToast(res.data.msg);
					})
			},
			getRooms() {
				this.$api.get('/api/isFood/page', this.fromData)
					.then(res => {
						console.log(res);
						this.indexList = res.data.data.list
					})
			},
			//智能排序
			sortConfirm(e) {
				this.fromData.page = 1
				console.log(e.value[0]);
				if (e.value[0] == '默认排序') {
					this.fromData.orderField = ''
					this.getRooms();
				} else if (e.value[0] == '好评优先') {
					this.fromData.orderField = 'SCORE'
					this.getRooms();
				} else if (e.value[0] == '距离优先') {
					this.fromData.orderField = 'DISTANCE'
					this.getRooms();
				} else if (e.value[0] == '高价优先') {
					this.fromData.orderField = 'MIN_PRICE_HIGH'
					this.getRooms();
				} else if (e.value[0] == '低价优先') {
					this.fromData.orderField = 'MIN_PRICE_LOW'
					this.getRooms();
				} else if (e.value[0] == '星级') {
					this.fromData.orderField = 'star'
					this.getRooms();
				}
				// this.passengerDefault = e.indexs;

				this.sortShow = false;
			},
			//选择区域
			areaConfirm(e) {
				this.fromData.page = 1
				console.log('选择区域', e);
				this.passengerDefault = e.indexs;

				if (e.value[0] !== '全部') {
					// this.fromData.areaCode = e.value[0];
					console.log(this.fromData.areaCode);
					this.AddressList.forEach(item => {
						if (item.scenicName == e.value[0]) {
							this.fromData.areaCode = item.id
						}
					})
					this.getRooms();
				} else if (e.value[0] == '全部') {
					this.fromData.areaCode = '';
					this.getRooms();
				}

				this.indexList = [];
				this.areaShow = false;
			},
			//关闭区域选择框
			onClose() {
				this.$set(this, 'sortShow', false)
			},
			// api/scenic/selectScenicList
			// 获取区域
			getselectScenicList() {
				this.$api.get('api/scenic/selectScenicList').then(res => {
					console.log(res);
					this.AddressList = res.data.data
					this.AddressList.forEach(item => {
						this.area[0].push(item.scenicName)
					})
					console.log(this.area);
				})
			},
			//跳转详情
			toHref(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pagesTrip/fineFood/details/details?list=" + JSON.stringify({
						...item
					})
				})

			},

		}
	}
</script>
<style lang="less">
	.u-cell__body {
		// padding: 24rpx !important;
		background-color: #fff !important;
		margin: 20rpx !important;
		border-radius: 16rpx !important;
	}

	.u-line {
		border-color: #f5f9fa !important;
	}

	.u-search {
		border: 1rpx solid #EFEFEF !important;
		background-color: #fff !important;
		border-radius: 100rpx;

		.u-search__content {
			height: 64rpx !important;
			background-color: #fff !important;

			.u-icon__icon {
				font-size: 40rpx !important;
			}

			.u-search__content__input {
				background-color: #fff !important;
			}
		}
	}
</style>
<style scoped lang="scss">
	.page {
		width: 100vw;
		box-sizing: border-box;
		background-color: #f5f9fa;

	}

	.hander {
		padding: 24rpx !important;
		box-sizing: border-box;
		background-color: #fff;
	}

	.search-input {
		// width: ;
		height: 64rpx;
		// padding: ;
		margin-bottom: 20rpx;

	}

	.category-main {
		// margin-top: 10rpx;
		// width: 702rpx;
		height: 150rpx;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		// align-content: center;
		.category-main-container {
			width: 90rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex-shrink: 2;
			flex-basis: 20%;
		}

		.image {
			height: 78rpx;
			width: 78rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.category-main-container text {
			margin-top: 5rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}

	.spotList {
		padding: 25rpx;
		box-sizing: border-box;
	}



	.uni-page-head {
		z-index: 1;
	}

	.u-sticky {
		top: 88rpx !important;
	}

	.searchCondition {
		// position: relative;
		// background-color: #f5f9fa;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 60rpx;
		padding-top: 30rpx;

		.item {
			margin: 0 auto;

			.u-icon {
				justify-content: center;
			}
		}

	}


	.right {
		margin-left: 26rpx;

		.p1 {
			color: #111111;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;

		}

		.p2 {
			display: flex;
			margin: 20rpx 0 30rpx;
		}

		.p3 {
			text {
				display: inline-block;
				padding: 6rpx;
				background-color: #fff6e6;
				font-size: 22rpx;
				color: #FF7D01;
				margin-bottom: 18rpx;
				border-radius: 4rpx;
			}
		}

		.p4 {
			display: flex;
			font-size: 18rpx;
			color: #777;
			align-items: center;

			.money {
				font-size: 18rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}

			.price {
				font-size: 30rpx;
				font-weight: bold;
				color: #FF4141;
				margin-right: 4rpx;
				font-family: Arial Bold, PingFang-SC-Bold, PingFang-SC;
				;
			}
		}
	}

	.sortBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.sort {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #F5F8FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				// box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

			.u-button--large {
				width: 94%;
				height: 40px;
			}
		}
	}
</style>